<!--  -->
<template>
    <div class="body">
        <div class="title">缴费管理</div>

        <div class="search" id="search">

        </div>
        <!-- <div><el-button type="primary">添加</el-button>
            <el-button type="danger" @click="delAll">删除</el-button>
        </div> -->
        <MyTable :delete="tableObject.delete" :deleteAll="tableObject.deleteAll" :table-data="tableObject.tableData" :columns="tableObject.columns">
            <template #buttons="{handleDeleteAll}">
                <el-button type="primary" >添加</el-button>
                <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>
            </template>
            <template #search="{ params, searchSubmit }">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="状态">
                        <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
                            <el-option label="已缴费" value="2" />
                            <el-option label="未缴费" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="账期">
                        <!-- {{ params }} -->
                        <el-date-picker @change="dateChange($event, params)" v-model="dateValue" type="daterange"
                            value-format="YYYY-MM-DD" format="YYYY-MM-DD" unlink-panels range-separator="至"
                            start-placeholder="起始日期" end-placeholder="截止日期" :shortcuts="shortcuts" />
                    </el-form-item>
                    <el-form-item label="楼栋">
                        <el-cascader @change="cascaderChange($event, params)" :props="props" placeholder="请选择楼栋" clearable v-model="cascaderValue"
                            :options="buildings" />
                    </el-form-item>
                    <el-form-item label="房号">
                        <el-input v-model="params.houseno" placeholder="请输入房号" clearable />
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="params.name" placeholder="请输入姓名" clearable />
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="params.mibile" placeholder="请输入电话" clearable />
                    </el-form-item>
                    <el-form-item label="添加人">
                        <el-input v-model="params.admin" placeholder="请输入添加人" clearable />
                    </el-form-item>
                    <el-form-item label="流水账单">
                        <el-input v-model="params.orderno" placeholder="请输入流水账单" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit">搜索</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #addtime="{scope}">
              <div>
                {{ dateFormat(scope.row.addtime) }}
              </div>
            </template>
            <template #begindate="{scope}">
              <div>
                {{ scope.row.begindate }}至 {{ scope.row.enddate }}
              </div>
            </template>
            <template #operate="{scope,handleDelete}">
              <div>
                <el-button type="primary">修改</el-button>
                 <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
              </div>
            </template>
        </MyTable>
    </div>
</template>

<script lang='ts' setup>
import MyTable, { TableType } from '../components/MyTable.vue'
// import { FreeParams } from '../service/fee/type'
import { getList, deleteAll,del } from '../service/fee/fee'
import { getBuildingList } from '../service/building/building'
import { reactive, toRefs, ref, onMounted, watch, toRaw, Teleport, defineAsyncComponent } from 'vue'
import moment from 'moment';
const tableObject = reactive<TableType>({
    columns: [
        {
            prop: 'id',
            label: 'id',
            attrs: {
                width: 80
            }
        },
        {
            prop: 'building',
            label: '楼栋名'
        },
        {
            prop: 'houseno',
            label: '房间号',
            attrs: {
                width: 140
            }
        },
        {
            prop: 'userName',
            label: '姓名',
            attrs: {
                width: 140
            }
        },
        {
            prop: 'mobile',
            label: '联系方式',
            attrs: {
                width: 140
            }
        },
        {
            prop: 'type',
            label: '缴费类型',
            attrs: {
                width: 100
            }
        },
        {
            prop: 'addtime',
            label: '导入时间',
            slot:true,
            attrs: {
                width:240
            }
        },

        {
            prop: 'begindate',
            label: '账期',
            slot:true,
            attrs: {
                width:240
            }
        },{
            prop: 'operate',
            label: '操作',
            slot:true,
            attrs: {
                width:180
            }
        }

        
    ],
    tableData: getList,
    delete:del,
    deleteAll:deleteAll
})

const cascaderValue = ref([])
const props = { label: "name", value: "id", checkStrictly: true }
 const cascaderChange = (e: any, params: any) => {
    if (!e) {
         params.buildingid = null;
     }
     else {
         params.buildingid = e[e.length - 1];
    }
 }
//获取楼栋数据
const buildings = ref([]);
const getBuildingData = async () => {
    const res: any = await getBuildingList(null);
    if (res.errCode === 10000) {
        buildings.value = res.data.list;
    }

}

//日期选择器 选择事件
const dateChange = (e: any, params: any) => {

    if (e != null) {
        params.begindate = e[0];
        params.enddate = e[1];
    }
    else {
        params.begindate = "";
        params.enddate = "";
    }
}

const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近3个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

const dateValue = ref('')
//格式化时间
const dateFormat = (val: string) => {
    return moment(val).format("YYYY-MM-DD HH:mm");
}
//表格数据
const state = reactive({
    total: 0,
    tableData: []
})
onMounted(() => {
    getBuildingData();
})
</script>
<style scoped lang="less">
.title {
    margin-bottom: 20px;
}

.page {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>